<template>
  <div class="table-present-wrap">
    <el-table
      ref="ELTable"
      :id="element.cid"
      border
      :data="element.data"
      style="width: 100%"
      :header-cell-style="{ background: '#f6f6f6', color: '#606266' }"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        v-if="element.options.isSelection"
        type="selection"
        width="55"
      >
      </el-table-column>
      <el-table-column
        v-for="col in element.columns"
        :fixed="col.fixed"
        :key="col.prop"
        :prop="col.prop"
        :label="col.label"
        :width="col.width"
      >
        <template slot-scope="scope">
          <template v-if="col.type == tableColType.DATE">
            <el-date-picker
              value-format="yyyy-MM-dd"
              v-model="scope.row[col.prop]"
              type="date"
              placeholder="选择日期"
            >
            </el-date-picker>
          </template>
          <template v-if="col.type ==  tableColType.INPUT">
            <el-input
              v-model="scope.row[col.prop]"
              @change="exec(scope.row, col.eventType)"
              autocomplete="off"
            ></el-input>
          </template>
          <template v-else>
            <span>{{ scope.row[col.prop] }}</span>
          </template>
        </template>
      </el-table-column>
      <el-table-column
        v-if="element.options.iseditor"
        :fixed="element.options.fixedright ? 'right' : false"
        width="200"
      >
        <template slot="header">
          <span style="margin-right: 20px">操作</span>
          <el-button type="text" @click="addline">添加</el-button>
        </template>
        <template slot-scope="scope">
          <div class="handle">
            <a
              v-for="(handle, index) in element.handles"
              @click="handleBtn(scope.row, handle.eventCode)"
              :key="index"
              >{{ handle.name }}</a
            >
            <a @click="deletecol(scope.$index)">删除</a>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination-wrap" v-if="element.options.isPaging">
      <el-pagination background layout="prev, pager, next" :total="1000">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { Store } from "@/low-code/utils/store.js";
import { tableColType } from '@/low-code/utils/enumeration.js'
export default {
  props: ["element", "data", "index"],
  data() {
    return {
      multipleSelection: this.element.multipleSelection,
      messagePool: Store.messagePool,
      tableColType
    };
  },
  methods: {
    handleBtn(row, eventCode) {
      eventCode &&
        this.store.eventCenter.fire(eventCode, {
          triggerSource: row,
        });
    },
    exec(row, eventType) {
      eventType &&
        this.store.eventCenter.fire(eventType, {
          triggerSource: row,
        });
    },
    deletecol(index) {
      this.$delete(this.element.data, index);
    },
    addline() {
      let row = {};
      this.element.columns.map((item) => {
        row[item["prop"]] = "";
      });
      this.$set(this.element.data, this.element.data.length, row);
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.ELTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.ELTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      if (this.element.options.selectEventCode) {
        this.store.eventCenter.fire(this.element.options.selectEventCode, {
          triggerSource: val,
        });
      }
      this.element.multipleSelection = val;
    },
    buldParams() {
      let _this=this
      this.element.paramsConfig &&
        this.element.paramsConfig.map((param) => {
          if (param.prefix) {
            if (param.prefix.indexOf(".") > -1) {
              let arr = param.prefix.split(".");
              let v = arr.reduce((form, key) => {
                return form[key];
              }, _this.store.models);
              Object.defineProperty(param, "value", {
                get() {
                  return v;
                },
              });
            } else {
              Object.defineProperty(param, "value", {
                get() {
                  return _this.store.models[param.prefix];
                },
              });
            }
          }
        });
    },
  },
  mounted() {
    this.toggleSelection(this.element.multipleSelection);
    this.buldParams();
  },
  computed: {
    store() {
      return this.element.getRoot();
    },
  },
};
</script>

<style lang="scss" scoped>
.handle {
  & > a {
    padding: 0 8px;
    color: #409eff;
    cursor: pointer;
  }
}
.pagination-wrap {
  padding: 20px 10px;
  text-align: right;
}
</style>
